<template>
  <view class="app-container categorize">
    <up-navbar left-icon="" placeholder bg-color="#281E1D">
      <template #center>
        <view style="padding: 0 20rpx; flex: 1">
          <up-search
            disabled
            placeholder="请输入商品名称"
            actionText=""
            :actionStyle="{ width: menuButtonWidth + 'px' }"
            @click="handleToSearch"
          ></up-search>
        </view>
      </template>
    </up-navbar>
    <Subject
      v-model="currentSubjectId"
      :subject-list="store.getters.formatSubjectList"
    ></Subject>
    <view id="content" class="flex-1 flex" style="height: 0">
      <Category v-model="currentCategoryId" :list="categoryList"></Category>
      <view class="flex-1">
        <Main
          v-model="currentCategorizeId"
          :categorizeList="categorizeList"
          :goodsList="productList"
        ></Main>
      </view>
    </view>
    <view>
      <my-tabbar current-page="/pages/index/categorize/categorize"></my-tabbar>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { categories } from "@/common/apis/goods.js";
import Subject from "./components/Subject.vue";
import Category from "./components/Category.vue";
import Main from "./components/Main.vue";
import { onHide, onShow } from "@dcloudio/uni-app";
import { useStore } from "vuex";

const store = useStore();

// 胶囊按钮宽度
const menuButtonWidth = ref(0);

// 二级分类列表
const categoryList = ref([]);

// 三级分类列表
const categorizeList = ref([]);

// 商品列表
const productList = ref([]);

// 当前选择一级分类id
const currentSubjectId = ref("");

// 当前选择二级分类id
const currentCategoryId = ref("");

// 当前选择三级分类id
const currentCategorizeId = ref("");

// 监听一级分类id变化
watch(currentSubjectId, () => {
  fetchGetCategoryList();
});

// 监听二级分类id变化
watch(currentCategoryId, (val) => {
  if (val) {
    fetchGetCategorizeList();
  } else {
    categorizeList.value = [];
    currentCategorizeId.value = undefined;
  }
});

// 跳转到搜索页
function handleToSearch() {
  uni.$u.route({
    url: "/pages/app/search",
    params: {
      type: "search",
    },
  });
}

// 获取二级分类列表
async function fetchGetCategoryList() {
  const response = await categories({
    subject: currentSubjectId.value,
  });
  if (response.length) {
    categoryList.value = response;
    currentCategoryId.value = response[0].id;
  } else {
    categoryList.value = [];
    currentCategoryId.value = undefined;
  }
}

// 获取三级分类列表
async function fetchGetCategorizeList() {
  const response = await categories({
    parent: currentCategoryId.value,
  });
  if (response) {
    categorizeList.value = [
      { id: currentCategoryId.value, name: "全部" },
      ...response,
    ];
    currentCategorizeId.value = currentCategoryId.value;
  }
}

onMounted(async () => {
  // #ifdef MP-WEIXIN
  // 获取胶囊按钮的位置信息
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  menuButtonWidth.value = menuButtonInfo.width;
  // #endif

  currentSubjectId.value = store.state.subject.subjectList[0].id;
});

onShow(() => {
  const id = uni.getStorageSync("currentSubjectId");
  if (id) {
    currentSubjectId.value = id;
  }
});

onHide(() => {
  uni.removeStorageSync("currentSubjectId");
});
</script>

<style lang="scss" scoped></style>
